<template>
  <div class="box">
    <div>
      黑暗骑士的网站-{{ mytitle }}-
      <el-button type="primary" @click="myclick">组件自定义事件</el-button>
    </div>
    <div>
      <!-- 
        slot表示一个插槽
        作用是将组件中的内容移动到插槽的里面
      -->
      <slot></slot>
    </div>
    <div>logo</div>
  </div>

  <div class="fixed">
    <!-- 
      具名插槽，和普通插槽的区别是，
      具名插槽可以有多个，普通插槽只能有一个
      而且是将#对应名称的模板内容移动到对应名称的插槽中
    -->
    <slot name="totop"></slot>
  </div>
</template>
<script setup>
import { ref } from 'vue';
// 定义属性
defineProps(['mytitle']);
// 自定义事件
const emits = defineEmits(['myevent']);

const myclick = () => {
  console.log('组件自定义事件');
  // 广播myevent事件,后面的参数是事件传出的数据
  emits('myevent', '事件传出的参数');
};
</script>
<style scoped>
.fixed {
  position: fixed;
  bottom: 10vh;
  right: 1rem;
}

.box {
  display: flex;
  justify-content: space-between;
}
</style>
